<template>
  <div>
    <s-breadcrumb></s-breadcrumb>
    <el-card>
      <!-- 搜索区 -->
      <el-form  ref="refresh_ref" :model="query_info" :rules="refresh_rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="用户昵称" prop="nick_name">
              <el-input placeholder="请输入用户昵称" maxlength="30" clearable show-word-limit v-model="query_info.nick_name"  @clear="get_list()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="收货人名称" prop="key">
              <el-input placeholder="请输入收货人名称" maxlength="30" clearable show-word-limit v-model="query_info.key"  @clear="get_list()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="收件人手机" prop="user_phone">
              <el-input placeholder="请输入收件人手机" maxlength="30" clearable show-word-limit v-model="query_info.user_phone"  @clear="get_list()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="订单号" prop="user_phone">
              <el-input placeholder="请输入订单号" maxlength="100" clearable show-word-limit v-model="query_info.order_no"  @clear="get_list()"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="订单状态" prop="status">
              <el-select v-model="query_info.status" placeholder="请选择订单状态" clearable @clear="get_list()">
                <el-option label="待付款" value="1"></el-option>
                <el-option label="待发货" value="2"></el-option>
                <el-option label="待收货" value="3"></el-option>
                <el-option label="待评价" value="4"></el-option>
                <el-option label="订单已取消" value="5"></el-option>
                <el-option label="申诉中" value="6"></el-option>
                <el-option label="申诉失败" value="7"></el-option>
                <el-option label="申诉完成" value="8"></el-option>
                <el-option label="已完成" value="9"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="付款时间" prop="pay_time">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="query_info.pay_time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="发货时间" prop="delivery_time">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="query_info.delivery_time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="primary" @click="get_list()">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="refresh()">重置</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="list" border>
        <el-table-column align="center" label="编号" prop="id" width="80" fixed="left" sortable></el-table-column>
         <el-table-column align="center" label="订单详情" prop="order_info" width="200"></el-table-column>
         <el-table-column align="center" label="订单状态" prop="status_name" width="200"></el-table-column>
         <el-table-column align="center" label="订单总金额" prop="total_money" width="150"></el-table-column>
         <el-table-column align="center" label="用户昵称" prop="user_to.nick_name" width="200"></el-table-column>
        <el-table-column align="center" label="订单号" prop="order_no" width="200"></el-table-column>
         <el-table-column align="center" label="订单状态" prop="status_name" width="200"></el-table-column>
        <el-table-column align="center" label="收货人名称" prop="user_name" width="150"></el-table-column>
        <el-table-column align="center" label="收件人手机" prop="user_phone" width="150"></el-table-column>
        <el-table-column align="center" label="收件人地址" prop="user_address" width="200"></el-table-column>
  <el-table-column align="center" label="付款时间" prop="pay_time" width="200" sortable></el-table-column>
        <el-table-column align="center" label="发货时间" prop="delivery_time" width="200" sortable></el-table-column>
        <el-table-column align="center" label="操作" width="550" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" :disabled="edit_btn" icon="iconfont icon-bianji" size="mini" @click="edit(scope.row.id)">编辑地址</el-button>
            <el-button type="success" v-if="scope.row.status===2" :disabled="status_btn" icon="iconfont icon-fahuo" size="mini" @click="status(scope.row.id)">发货</el-button>
            <el-button type="info" :disabled="order_detail_btn" icon="iconfont icon-xiangqing" size="mini" @click="order_detail(scope.row.id)">订单详情</el-button>
            <el-button type="warning" :disabled="order_complain_list_btn" icon="iconfont icon-icon-test" size="mini" @click="order_complain_list(scope.row.id)">申诉记录({{scope.row.order_complain_to_count}})</el-button>
            <el-button type="danger" v-if="scope.row.status!==1&&scope.row.status!==5" :disabled="order_refund_info_btn" icon="iconfont icon-refund" size="mini" @click="order_refund_edit(scope.row.id)">退款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination @size-change="handle_size_change" @current-change="handle_current_change" :total="total" :layout="layout" :current-page="query_info.page" :page-sizes="page_sizes" :page-size="query_info.pagesize"></el-pagination>
    </el-card>
    <!-- 退款对话框 -->
    <el-dialog title="退款" :visible.sync="order_refund_visible" :width="percentage_width" @close="order_refund_close">
      <!-- 主体区 -->
      <el-form label-width="150px" :model="order_refund_form" :rules="order_refund_rules"  ref="order_refund_ref">
        <el-form-item label="订单号">
          <el-input disabled v-model="order_refund_form.order_no"></el-input>
        </el-form-item>
        <el-form-item label="支付平台流水号">
          <el-input disabled v-model="order_refund_form.serial_number"></el-input>
        </el-form-item>
        <el-form-item label="订单总金额">
          <el-input disabled v-model="order_refund_form.total_money"></el-input>
        </el-form-item>
        <el-form-item label="退款金额" prop="refund_money">
          <el-input placeholder="请输入退款金额" maxlength="10" clearable show-word-limit v-model="order_refund_form.refund_money" @input="refund_money_input"></el-input>
        </el-form-item>
        <el-form-item label="退款备注" prop="refund_comment">
          <el-input placeholder="请输入退款备注" maxlength="12" clearable show-word-limit v-model="order_refund_form.refund_comment"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="order_refund_visible = false">取 消</el-button>
          <el-button :disabled="order_refund_info_btn" type="primary" @click="order_refund_send()">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 编辑地址对话框 -->
    <el-dialog title="编辑地址" :visible.sync="edit_dialog_visible" :width="percentage_width" @close="edit_dialog_close">
      <!-- 主体区 -->
      <el-form label-width="100px" :model="edit_form" :rules="rules"  ref="edit_ref">
        <el-form-item label="收货人名称" prop="user_name">
          <el-input placeholder="请输入收货人名称" maxlength="30" clearable show-word-limit v-model="edit_form.user_name"></el-input>
        </el-form-item>
        <el-form-item label="收件人手机" prop="user_phone">
          <el-input placeholder="请输入收件人手机" maxlength="11" clearable show-word-limit v-model="edit_form.user_phone"></el-input>
        </el-form-item>
        <el-form-item label="地址选择" prop="county_id">
          <el-cascader placeholder="请选择地址"
            v-model="value"
            :options="area_list"
            :props="{ expandTrigger: 'hover' ,value:'id',label:'name'}"
            @change="add_handle_change" clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="收件人地址" prop="user_address">
          <el-input placeholder="请输入收件人地址" maxlength="50" clearable show-word-limit v-model="edit_form.user_address"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="edit_dialog_visible = false">取 消</el-button>
          <el-button :disabled="edit_btn" type="primary" @click="edit_send()">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 订单详情对话框 -->
    <el-dialog title="订单详情" :visible.sync="order_detail_visible" :width="percentage_width" @close="order_detail_close">
      <!-- 主体区 -->
      <el-form label-width="130px">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="订单号">
              <el-input disabled :value="order_info.order_no"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="订单状态">
              <el-input disabled :value="order_info.status"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="订单总金额">
              <el-input disabled :value="order_info.total_money"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="总邮费">
              <el-input disabled :value="order_info.deliver_money"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="商品总数">
              <el-input disabled :value="order_info.total_num"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收货人名称">
              <el-input disabled :value="order_info.user_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收货人手机">
              <el-input disabled :value="order_info.user_phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收货人地址">
              <el-input disabled :value="order_info.user_address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="备注">
              <el-input type="textarea" disabled :value="order_info.comment"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-for="(item,index) in order_info.order_info_to" :key="index" style="border: 1px solid red;padding-top: 20px;">
          <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item :label="'商品'+(index+1)">
                  <el-input disabled :value="item.product_to.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="规格">
                  <el-input disabled :value="item.specs"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="数量">
                  <el-input disabled :value="item.num"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="单价">
                  <el-input disabled :value="item.money"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="单个邮费">
                  <el-input disabled :value="item.postage"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
        </div>

        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="用户昵称">
              <el-input disabled :value="order_info.nick_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="支付平台流水号">
              <el-input disabled :value="order_info.serial_number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="创建订单时间">
              <el-input disabled :value="order_info.created_at"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="付款时间">
              <el-input disabled :value="order_info.pay_time"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="评价时间">
              <el-input disabled :value="order_info.receive_time"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="发货时间">
              <el-input disabled :value="order_info.delivery_time"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      order_refund_info_btn: this.is_string('shop/order/order_refund_info'), // 退款按钮是否禁用
      edit_btn: this.is_string('shop/order/edit_address'), // 编辑地址按钮是否禁用
      status_btn: this.is_string('shop/order/status'), // 发货按钮是否禁用
      order_detail_btn: this.is_string('shop/order/order_detail'), // 订单详情按钮是否禁用
      order_complain_list_btn: this.is_string('shop/order/order_complain_list'), // 申诉记录按钮是否禁用
      percentage_width: this.$config.percentage_width, // 弹框的宽度
      page_sizes: this.$config.page_sizes, // 分页条数列表
      layout: this.$config.layout, // 表格分页组件配置
      order_info: {}, // 订单详情
      order_detail_visible: false, //
      order_refund_visible: false, //
      query_info: {
        nick_name: '', // 用户昵称
        key: '', // 收货人名称
        user_phone: '', // 收件人手机
        order_no: '', // 订单号
        status: '', // 状态
        pay_time: [], // 付款时间
        delivery_time: [], // 发货时间
        page: this.$config.page, // 当前页码
        pagesize: this.$config.pagesize// 每页显示条数
      },
      area_list: [], // 省市区数据
      value: [], // 省市区数据选择的数据
      list: [], // 列表数据
      total: 0, // 总数据条数
      refresh_rules: { nick_name: [], key: [], user_phone: [], order_no: [], status: [], pay_time: [], delivery_time: [] },
      // 编辑对话框是否显示
      edit_dialog_visible: false,
      edit_form: {
        id: '',
        user_name: '',
        user_address: '',
        user_phone: '',
        province_id: '',
        province_name: '',
        city_id: '',
        city_name: '',
        county_id: '',
        county_name: ''
      },
      rules: {
        user_name: [
          { required: true, message: '请输入收货人名称！', trigger: 'blur' }
        ],
        user_phone: [
          { required: true, message: '请输入收件人手机！', trigger: 'blur' }
        ],
        user_address: [
          { required: true, message: '请输入收件人地址！', trigger: 'blur' }
        ],
        county_id: [
          { required: true, message: '请选择地址！', trigger: 'blur' }
        ]
      },
      order_refund_form: {
        id: '',
        total_money: '', // 订单金额
        refund_money: '', // 退款金额
        order_no: '', // 订单号
        serial_number: '', // 支付平台流水号
        refund_comment: '' // 退款备注
      },
      order_refund_rules: {
        refund_comment: [
          { required: true, message: '请输入退款备注！', trigger: 'blur' }
        ],
        refund_money: [
          { required: true, message: '请输入退款金额！', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.get_list()
  },
  methods: {
    // 获取列表
    get_list () {
      this.$base.request({
        that: this,
        url: 'shop/order/index',
        data: this.query_info
      }, (res) => {
        if (res.code === 8888) {
          this.list = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 刷新
    refresh () {
      this.$refs.refresh_ref.resetFields()
      this.get_list()
    },
    // 当前每页多少条选择
    handle_size_change (pagesize) {
      this.query_info.pagesize = pagesize
      this.get_list()
    },
    // 当前页码
    handle_current_change (page) {
      this.query_info.page = page
      this.get_list()
    },
    // 监听退款金额
    refund_money_input () {
      if (parseFloat(this.order_refund_form.refund_money) > parseFloat(this.order_refund_form.total_money)) {
        this.order_refund_form.refund_money = this.order_refund_form.total_money
      }
    },
    // 监听退款对话框的关闭事件
    order_refund_close () {
      this.$refs.order_refund_ref.resetFields()
    },
    // 打开退款按钮对话框
    order_refund_edit (id) {
      this.$base.request({
        that: this,
        url: 'shop/order/order_refund_info',
        data: { id: id }
      }, (res) => {
        if (res.code === 8888) {
          this.order_refund_visible = true
          this.order_refund_form = res.data
        }
      })
    },
    // 提交退款数据
    order_refund_send () {
      this.$refs.order_refund_ref.validate(valid => {
        if (valid) {
          this.$base.request({
            that: this,
            method: 'PUT',
            url: 'shop/order/order_refund',
            data: {
              id: this.order_refund_form.id,
              refund_comment: this.order_refund_form.refund_comment,
              refund_money: this.order_refund_form.refund_money
            }
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.order_refund_visible = false
              var that = this
              setTimeout(function () {
                that.get_list()
              }, 6000)
            }
          })
        }
      })
    },
    // 订单详情
    order_detail (id) {
      this.$base.request({
        that: this,
        url: 'shop/order/order_detail',
        data: { id: id }
      }, (res) => {
        if (res.code === 8888) {
          this.order_detail_visible = true
          this.order_info = res.data
        }
      })
    },
    // 监听订单详情对话框的关闭事件
    order_detail_close () {
      this.order_info = {}
    },
    // 打开编辑地址按钮对话框
    edit (id) {
      this.$base.request({
        that: this,
        url: 'shop/order/edit_address',
        data: { id: id }
      }, (res) => {
        if (res.code === 8888) {
          this.edit_dialog_visible = true
          this.edit_form = res.data.info
          this.area_list = res.data.area_list
          this.value = [res.data.info.province_id, res.data.info.city_id, res.data.info.county_id]
        }
      })
    },
    // 提交编辑地址数据
    edit_send () {
      this.$refs.edit_ref.validate(valid => {
        if (valid) {
          this.$base.request({
            that: this,
            method: 'PUT',
            url: 'shop/order/edit_update',
            data: this.edit_form
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.edit_dialog_visible = false
              this.get_list()
            }
          })
        }
      })
    },
    // 监听编辑地址对话框的关闭事件
    edit_dialog_close () {
      this.$refs.edit_ref.resetFields()
    },
    // 监听编辑获取选择器值
    add_handle_change (e) {
      if (this.value.length > 0) {
        this.edit_form.province_id = this.value[0]
        this.edit_form.city_id = this.value[1]
        this.edit_form.county_id = this.value[2]
        for (var i = 0; i < this.area_list.length; i++) {
          if (this.value[0] === this.area_list[i].id) {
            this.edit_form.province_name = this.area_list[i].name
            console.log(this.edit_form.province_name)
            for (var j = 0; j < this.area_list[i].children.length; j++) {
              if (this.value[1] === this.area_list[i].children[j].id) {
                this.edit_form.city_name = this.area_list[i].children[j].name
                console.log(this.edit_form.city_name)
                for (var x = 0; x < this.area_list[i].children[j].children.length; x++) {
                  if (this.value[2] === this.area_list[i].children[j].children[x].id) {
                    this.edit_form.county_name = this.area_list[i].children[j].children[x].name
                    console.log(this.edit_form.county_name)
                    this.edit_form.user_address = this.edit_form.province_name + this.edit_form.city_name + this.edit_form.county_name
                    return
                  }
                }
              }
            }
          }
        }
      } else {
        this.edit_form.province_id = ''
        this.edit_form.city_id = ''
        this.edit_form.county_id = ''
        this.edit_form.province_name = ''
        this.edit_form.city_name = ''
        this.edit_form.county_name = ''
        this.edit_form.user_address = ''
      }
    },
    // 发货
    status (id) {
      this.$base.confirm({ that: this, content: '确定已发货吗？' }, () => {
        this.$base.request({
          that: this,
          method: 'PUT',
          url: 'shop/order/status',
          data: { id: id }
        }, (res) => {
          if (res.code === 8888) {
            this.$base.message({ that: this, message: res.msg })
            this.get_list()
          }
        })
      })
    },
    // 申诉记录
    order_complain_list (id) {
      this.$router.push({ path: '/shop/order/order_complain', query: { id: id } })
    }
  }
}
</script>
